<template>
    <div>
        地址:
        <select  v-model="von.id" >
                        <option value="">请选择</option>
                        <option :value="o.aid" v-for="o in vou"  >{{ o.aName }}</option>
                    </select>
        门店名称:
        <input type="text" v-model="von.name" >
        
        <input type="button" value="查询" @click="Show()" >
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>门店名称店</td>
                    <td>分店名称</td>
                    <td>地址</td>
                    <td>图片</td>
                    <td>手机号</td>
                    <td>状态</td>
                    <td>门店介绍</td>
                    <td>入店须知</td>
                    <td>交通信息</td>
                    <td>功能</td>
                </tr>

                <tr v-for="o in info.list" >
                    <td>{{ o.nName }}</td>
                    <td>{{ o.fName }}</td>
                    <td>{{ o.aName }}</td>
                    <td><img :src="o.fImg" width="60" height="60" ></td>
                    <td>{{ o.phone }}</td>
                    <td>{{ o.state==1?"启用":"禁用" }}</td>
                    <td>{{ o.menjie }}</td>
                    <td>{{ o.menR }}</td>
                    <td>{{ o.menXin }}</td>
                    <td>
                        <input type="button" v-if="o.state==0"  value="启用" @click="Updata(o.fId,1)" >
                        <input type="button" v-if="o.state==1"  value="禁用" @click="Updata(o.fId,0)" >
                        <input type="button"   value="修改" @click="Fandd(o.fId)" >
                    </td>
                </tr>
            </thead>
        </table>
        <span>共{{ info.zt }}条</span>
        <span>当前是第{{ von.pazisize }}/{{ info.dy }}页</span>
        <input type="button" value="首页" @click="Fand(1)">
        <input type="button" value="上一页" @click="Fand(von.pazisize-1)" >
        <input type="button" :value="o" v-for="o in info.dy" @click="Fand(o)">
        <input type="button" value="下一页" @click="Fand(von.pazisize+1)" >
        <input type="button" value="尾页" @click="Fand(info.dy)" >
        <select v-model="von.paziindex"   @change="Show" >
            <option :value="o" v-for="o in fan" >{{ o }}</option>
        </select>
    </input>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router=useRouter();


onMounted(()=>{
    Show();
    List();
} )

let info:any=ref({
    list:[],
    zt: 0,
    dy: 0
});

let vou:any=ref([]);
let von:any=ref({
    id:'',
    name:'',
    pazisize:1,
    paziindex:3
});

let fan:any=ref([2,4,6,8]);

const Fand=(e:any)=>{
    von.value.pazisize=e;
    Show();
}

const Updata=(fId:any,state:any)=>{
    let f=confirm("要修改吗");
    if(f){
        axios({
        url:'https://localhost:7124/api/User/Updat',
        method:'post',
        params:{
            id:fId,
            state:state
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert("修改成功");
        Show();
    }

    })
    }
    
}

const Fandd=(fId:any)=>{
    router.push({
        path:'/updata',
        query:{
            id:fId
        }
    })
}


const Show=()=>{
    axios({
        url:'https://localhost:7124/api/User/Show',
        method:'get',
        params:von.value
    })
    .then((res)=>{
        console.log(res);
        Object.assign(info.value,res.data)
        
    })
}
const List=()=>{
    axios({
        url:'https://localhost:7124/api/User/List',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        vou.value=res.data;
    })
}


</script>

<style scoped>

</style>